<template>
	<view class="container">
		<text class="demo-title">示例三：事件监听与程序化控制</text>
		<!--
			:current: 绑定当前所在滑块的 index
			current-item-id: 通过 item-id 控制当前滑块
			@change: current 改变时触发
			@transition: 滑块位置改变时触发
			@animationfinish: 动画结束时触发
		-->
		<swiper class="interactive-swiper" :current="currentIndex" @change="onChange" @transition="onTransition"
			@animationfinish="onAnimationFinish">
			<swiper-item item-id="itemA">
				<view class="swiper-item-content item-a"><text class="item-text">页面 A (index 0)</text></view>
			</swiper-item>
			<swiper-item item-id="itemB">
				<view class="swiper-item-content item-b"><text class="item-text">页面 B (index 1)</text></view>
			</swiper-item>
			<swiper-item item-id="itemC">
				<view class="swiper-item-content item-c"><text class="item-text">页面 C (index 2)</text></view>
			</swiper-item>
		</swiper>

		<view class="info-panel">
			<text>@change - 当前页: {{ info.current }}, 来源: {{ info.source }}</text>
			<text>@transition - dx: {{ info.dx.toFixed(2) }}, dy: {{ info.dy.toFixed(2) }}</text>
			<text>@animationfinish - 动画结束在页: {{ info.endCurrent }}</text>
		</view>

		<view class="control-panel">
			<button @click="goTo(1)">跳转到页面B (index 1)</button>
			<button @click="goToNext">下一页</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 0,
				info: {
					current: 0,
					source: '',
					dx: 0,
					dy: 0,
					endCurrent: 0,
				}
			}
		},
		methods: {
			// 通过数据绑定控制swiper
			goTo(index) {
				this.currentIndex = index;
			},
			goToNext() {
				// 循环跳转
				this.currentIndex = (this.currentIndex + 1) % 3;
			},
			// @change 事件
			onChange(e) {
				console.log('change 事件:', e.detail);
				this.info.current = e.detail.current;
				this.info.source = e.detail.source || '空(代码触发)'; // 如果是代码触发, source为空
			},
			// @transition 事件
			onTransition(e) {
				// console.log('transition 事件:', e.detail); // 这个事件会非常频繁地触发
				this.info.dx = e.detail.dx;
				this.info.dy = e.detail.dy;
			},
			// @animationfinish 事件
			onAnimationFinish(e) {
				console.log('animationfinish 事件:', e.detail);
				this.info.endCurrent = e.detail.current;
			}
		}
	}
</script>

<style>
	/* ...复用基础样式... */
	.interactive-swiper {
		height: 250rpx;
	}

	.info-panel {
		padding: 20rpx;
		background-color: #f8f8f8;
		font-size: 24rpx;
		line-height: 1.6;
		color: #666;
	}

	.control-panel {
		display: flex;
		justify-content: space-around;
		padding: 20rpx;
	}

	.swiper-item-content {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		/* 为卡片添加圆角和缩放效果，使其更像卡片 */
		transform: scale(0.9);
		border-radius: 20rpx;
		transition: transform 0.3s;
	}

	.item-a {
		background-color: #67C23A;
	}

	.item-b {
		background-color: #409EFF;
	}

	.item-c {
		background-color: #9049DE;
	}
</style>